<template>
  <div class="pop loadingPage">
    <!-- <img src="static/images/loadingBg.png" class="loadBg"> -->
    <div class="loadingBg"></div>
    <div class="loadingBar" id="loadingBar" ></div> 
    <div class="loading"><span>{{percent}}%</span></div>
    <div class="loadPoint" id="loadPoint"></div>
  </div>
</template>
<style type="text/css">
  .loadingPage{
    position: absolute;
    top:0;
    left: 0;
    background-position: bottom center;
    background-size: 100% auto;
  }
  .loadBg{
    position: absolute;
    width:100%;
    bottom:0rem;
    left:0rem;
    z-index:100;
  }

  .loadingBg{
    bottom: 9.22rem;
    left: 3.12rem;
    width: 3.72rem;
    height: 0.2133rem;
    position: absolute;
    background:url('../../public/static/images/loadBox.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    z-index: 9999;
  }
  .loadingBar{
    bottom: 9.22rem;
    left: 3.12rem;
    width: 3.72rem;
    height: 0.2133rem;
    position: absolute;
    background:url('../../public/static/images/loadBar.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 100%;
    z-index: 9999;
  }
  .loading{
    position: absolute;
    width: 100%;
    color: #003361;
    text-align: center;
    font-size: 0.4rem;
    bottom: 9.6rem;
    z-index: 9999;
  }
  .loadPoint{
    bottom: 9rem;
    left: 3.12rem;
    width: 0.12rem;
    height: 0.5333rem;
    position: absolute;
    background:url('../../public/static/images/loadPoint.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% auto;
    z-index: 9999;
  }
</style>
<script type="text/javascript">
  export default{
    data(){
      return {
       percent:0
     }
   },
   mounted(){
    var local = this;
    var images = [
    "./static/images/loadingBg.png",
    "./static/images/loadPoint.png",
    "./static/images/bottle.png",
    "./static/images/energyBar.png",
    "./static/images/failTip.png",
    "./static/images/light.png",
    "./static/images/plug.png",
    "./static/images/product.png",
    "./static/images/result.png",
    "./static/images/resultBg.png",
    "./static/images/reUpload.png",
    "./static/images/scan.png",
    "./static/images/scanLine.png",
    "./static/images/scanBtn.png",
    "./static/images/startBg.png",
    "./static/images/startBtn.png",
    "./static/images/testBg.png",
    "./static/images/upload.png",
    "./static/images/uploadTip.png",
    "./static/images/water1.png",
    "./static/images/water2.png",
    "./static/images/water3.png",
    "./static/images/water4.png",
    "./static/images/pentagon.png",
    "./static/images/rules.png",
    "./static/images/hook.png",
    "./static/images/hand.png"
    ];
    for(var i=1;i<13;i++){
      images.push("./static/images/bubble/bubble"+i+".png");
    };
    for(var j=1;j<20;j++){
      images.push("./static/images/up/up"+j+".png");
    }
    var loader = new resLoader({
      resources :images,
      onStart : function(total){ 
        console.log('start:'+total); 
      }, 
      onProgress : function(current, total){
       //console.log(current+'/'+total);
       var percent = Math.floor(current/total*100);
       local.percent = percent;    
       $("#loadPoint").css("left",(3.1176+ 3.6*current/total) +"rem");
       $("#loadingBar").css("background-size",percent+"% 100%");          
     }, 
     onComplete : function(total){
            //local.$router.push({path:'/startPage'});
            var vueAppThis = local.$root.vueAppThis;
            //vueAppThis.$emit('evt_enter_testPage');
            vueAppThis.$emit('evt_load_complete');
          }
        });

    loader.start();        
    if (Tida.isSupportedApp) {
      console.log('support');
      Tida.ready({
        console: 0
      }, function () {
       console.log('ready');
             // 授权成功 可以顺利调用需要授权的接口了
             Tida.mixNick({
              sellerNick: "VICHY薇姿官方旗舰店"
            }, function (result) {
              console.log('mixnick',result);
              var mixnick = encodeURIComponent(result.mixnick);
              window.mixnick = mixnick;
            });

           })
    } 
  },
  methods:{

  }
}
</script>